<template>
  <div class="login">
    <div class="login_bg">
      <img class="gif-bg" src="@/assets/timge.gif" alt="" />
    </div>
    <div class="login_main">
      <div class="login-content">
        <h1 class="title">登 录</h1>
        <van-form ref="form">
          <van-field
            v-model="form.mobile"
            name="mobile"
            left-icon="graphic"
            placeholder="请输入手机号"
            :rules="rules.mobile"
          />
          <van-field
            v-model="form.code"
            name="code"
            left-icon="lock"
            placeholder="请输入验证码"
            :rules="rules.code"
          >
            <template #button class="codeBtn">
              <div class="getCode" @click="getCode" v-if="totalTime === 6">
                获取验证码
              </div>
              <div class="getCode" v-else>{{ totalTime }}</div>
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button
              class="login-btn"
              block
              type="info"
              native-type="submit"
              @click="login"
            >
              登 录
            </van-button>
            <div class="clause">
              <div class="later" @click="$router.push('/index')">稍后登录</div>
            </div>
            <u class="tk"> 隐私条款</u>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { apiLogin } from '@/api/use.js'
import { localSet, localGet } from '@/utils/mylocal.js'

export default {
  data () {
    return {
      totalTime: 6,
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: 'true', message: '请输入手机号', trigger: 'onChange' },
          {
            validator: value => {
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
            },
            message: '请正确输入手机号',
            trigger: 'onChange'
          }
        ],
        code: [
          { required: 'true', message: '请输入验证码', trigger: 'onChange' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.form.validate().then(() => {
        apiLogin(this.form)
          .then(res => {
            console.log(res)
            localSet('token', res.data.data)
            this.$router.push(
              this.$route.query.next ? this.$route.query.next : '/index'
            )
            // this.$store.comments('setUserInfo',res)
          })
          .catch(() => {
            this.$toast.fail('验证失败')
          })
      })
    },
    getCode () {
      this.$refs.form.validate('mobile').then(() => {
        this.totalTime--
        const _interval = setInterval(() => {
          this.totalTime--
          if (this.totalTime <= 0) {
            clearInterval(_interval)
            this.totalTime = 6
          }
        }, 1000)
        this.$toast.success('246810')
      })
    }
  },
  created () {
    if (localGet('token')) {
      this.$router.push(
        this.$route.query.next ? this.$route.query.next : '/index'
      )
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #e33f3e;
  position: relative;
  .login_bg {
    overflow: hidden;
    height: 100%;
    .gif-bg {
      height: 100%;
      width: 100%;
    }
  }
  .title {
    text-align: center;
    font-size: 38px;
    font-weight: 300;
  }
  .login_main {
    width: 90%;
    position: absolute;
    top: 10%;
    left: 55%;
    transform: translateX(-55%);
  }
  .login-content {
    width: 90%;
    padding: 15px;
    height: 350px;

    background: hsla(0, 0%, 100%, 0.75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    position: relative;
    ::v-deep .van-cell {
      background: none;
      input::-webkit-input-placeholder {
        color: #666;
      }
      // .van-field__body .van-field__control:-internal-autofill-selected {
      //   background: none !important;
      // }
      // input:-webkit-autofill {
      //   box-shadow: hsla(0, 0%, 100%, 0.75);
      // }
      input:-internal-autofill-previewed,
      input:-internal-autofill-selected {
        -webkit-text-fill-color: #666 !important;
        transition: background-color 5000s ease-in-out 0s !important;
      }

      border-bottom: 1px solid #55555541;
      &::after {
        border-bottom: 0px;
      }
    }
    .clause {
      position: absolute;
      width: 100%;
      bottom: 50px;
      margin-left: 105px;
      font-size: 15px;
      color: #666;
    }
  }
  ::v-deep .hmnavbar .van-nav-bar__content {
    background-color: #e33f3e;
  }
  ::v-deep .van-nav-bar__title {
    color: white;
  }

  .login-btn {
    margin-top: 30px;
    background-color: #e33f3e;
    border: 0;
    border-radius: 5px;
  }
  .getCode {
    width: 90px;
    padding: 2.5px 0px;

    color: gray;

    text-align: center;
  }
  .tk {
    position: relative;
    bottom: -50px;
    right: -210px;
    font-size: 15px;
    color: royalblue;
  }
}
</style>
